<template>
	<view>
		<view class="cu-card dynamic isCard" v-if="shopList.length!=0">
			<view class="cu-item shadow" v-for="(item,index) in shopList" :key="index">
				<view class="PhotographerBoxL">
					<view class="cu-avatar round xl" :style="'background-image:url('+item.merchantAvatar+');'">
						<view class="cu-tag badge">{{item.merchantStatusName}}</view>
					</view>
					<!-- <van-image  fit="cover" round  width="3rem" height="3rem" :src="item.merchantAvatar" ></van-image> -->
					<view class="text-bold margin-top-sm" style="color: #fad556;">{{item.merchantName}}</view>
					<view class='cu-tag2 margin-top-xs bg-blue radius'>{{item.merchantAddress}}</view>
					<view class="text-xs margin-top-sm text-grey">
						<van-rate size="12" color="#fad556" icon="gem" void-icon="gem" readonly
							:value="item.starLevel" />
					</view>
				</view>
				<view class="PhotographerBoxR">
					<view class="text-sm text-bold">主营产品:{{item.merchantProducts}}</view>
					<!-- <view class="text-sm text-grey margin-top-xs">{{item.merchantIntroduce}}</view> -->
					<view class="margin-top-sm text-black">商铺作品</view>
					<view class="PhotoPpl margin-top-xs flex justify-between">
						<image :src="item1" mode="aspectFill" v-for="(item1,index) in item.imageList" :key="index">
						</image>
					</view>
				</view>
				<view class="padding-sm text-center fl text-bold text-blue goPhotographer"
					@click="toDetail(item.starLevel)">查看详情</view>
				<view class="padding-sm text-center fl text-bold text-blue goPhotographer"
					@click="toDetail(item.starLevel)">编辑小店</view>
				<view style="display: flex;" class="padding-sm text-center fl text-bold text-blue goPhotographer"
					@click="toDetail(item.starLevel)"><button type="primary">营业</button><button
						type="warn">关店</button></view>

			</view>

		</view>
		<view v-else class="empty_store">
			<van-empty  description="暂无自己的小店~" />
			<button @click="addStore">快速注册一个小店</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList: [{
					// merchantId: 0,
					// merchantAvatar: "https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com/linna.jpg",
					// merchantName: "滑呗-叉烧饭",
					// merchantAddress: "喷泉广场",
					// starLevel: "5",
					// merchantProducts: "雪糕、冰粉",
					// merchantIntroduce: "人工手搓冰粉解渴又好吃噢",
					// imgList: [
					// 	"https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com/linna.jpg",
					// 	"https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com/linna.jpg",
					// 	"https://gulimall-lhc.oss-cn-shanghai.aliyuncs.com/linna.jpg",
					// ],
					// merchantStatusName: "正在营业"

				}]
			}
		},
		onLoad() {
			const page = 1;
			this.$request('/merchant/list/my/store?page=' + page, {}, 'GET').then(res => {
				this.shopList = res.records;
				console.log(res);
			}).catch(err => {

			})
		},
		methods: {
			addStore(){
				uni.navigateTo({
					url:"./addStore"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picBox {
		width: 750rpx;
		background-color: #1a1a1a;

		.picMain {
			width: 750rpx;
			height: 380rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;

			.picL {
				width: 430rpx;
				height: 100%;

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 100%;
				}
			}

			.picB {
				width: 250rpx;
				height: 100%;
				display: flex;
				flex-flow: column; //垂直排列
				justify-content: space-between; //两端对齐

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 48%;
				}
			}
		}
	}

	.title-header {
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		/* padding: 40rpx 0 0 0; */
		font-weight: bold;
		background-image: url(https://s1.ax1x.com/2020/09/16/wccswF.png);
		background-size: cover;
	}

	.title-text {
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}

	.PhotographerBoxL {
		width: 35%;
		text-align: center;
		padding: 25rpx;
		float: left;
	}

	.PhotographerBoxR {
		width: 65%;
		padding: 25rpx;
		float: left;

		.PhotoPpl {
			width: 100%;

			image {
				border-radius: 8rpx;
				width: 128rpx;
				height: 128rpx;
			}
		}
	}

	.cu-tag2 {
		height: 40rpx !important;
		font-size: 22rpx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0rpx 16rpx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.goPhotographer {
		width: 96%;
		margin: 0 2%;
		border-top: 1rpx #CCCCCC dashed;
	}

	page {
		background-color: #fad556;
		height: 100%;
	}

	.content {
		border-top-right-radius: 80upx;
		border-top-left-radius: 80upx;
		height: 100%;
		background-color: #f2f2f5;
		margin-top: 20%;
	}

	.swiper {
		position: absolute;
		border-radius: 20upx;
		width: 650upx;
		height: auto;
		margin-top: 120upx;
		background-color: white;
		margin-left: 45upx;
	}

	.recommend {
		border-radius: 20upx;
		position: absolute;
		width: 650upx;
		height: 210upx;
		margin-top: -110upx;
		background-color: white;
		margin-left: 45upx;
	}

	.fresh {
		color: #007AFF;
		padding: 20upx 20upx;
		font-weight: 700;
	}

	.ranks {
		width: 94%;
		margin-left: 10upx;
		display: flex;
		margin-top: -30upx;
	}

	.rank {
		font-weight: 700;
		font-size: 25upx;
		background-color: #f6f1da;
		border-radius: 20upx;
		margin-left: 40upx;
		padding: 30upx 20upx;
	}

	.swipers {
		height: 300upx;
		/* margin-left: 10upx; */
		display: flex;
		width: 630upx;
	}

	.swiper-box {
		width: 650upx;
		height: 260upx;
	}

	.swiper_item {
		height: 140upx;
		font-weight: 700;
		font-size: 30upx;
		background-color: #f6f1da;
		border-radius: 20upx;
		margin-left: 15upx;
		padding: 60upx 50upx;
	}

	.type {
		margin-left: 10upx;
		margin-top: -20upx;
		margin-right: 40upx;
	}

	.second_row {
		margin-top: 30upx;
	}

	.item-type {
		text-align: center;
		margin-left: 10upx;
		margin-right: 50upx;
	}
</style>
